var e = 50;
var el = e * .3;
var touchR = 25;//触发半径
var width = document.getElementById("canvas").width;
var height = document.getElementById("canvas").height;
var sideL = 3;
var hfx = Math.round(width / e) / 2;
var sideR = hfx * 2 - 3;
var bgPic = new Image();
var titleText = '做一做：拉动下图四边形的顶点，变成一个高为4厘米，面积为20平方厘米的梯形。'
//文字偏移量
var a = [-e + el, -e * .5];
var b = [e - el, -e * .5];
var c = [-e + el, e * .5];
var d = [e - el, e * .5];
var Draw = {
    init: function () {
        this.obj = document.getElementById("canvas"); //获取canvas对象
        this.cObj = document.getElementById("canvas").getContext("2d"); //获取canvas对象上下文环境
        this.bgObj = document.getElementById("bg").getContext("2d"); //获取canvas对象上下文环境
        
        // this.event(); //初始化事件
        this.x = 0; //偏移量
        this.y = 0; //偏移量
        this.start = [0, 0];
        //初始化 点
        var A = this.A = [8, 3];
        var B = this.B = [12, 3];
        var C = this.C = [8, 7];
        var D = this.D = [14, 7];

        var A2 = this.A2 = [24, 3];
        var B2 = this.B2 = [28, 3];
        var C2 = this.C2 = [24, 7];
        var D2 = this.D2 = [28, 7];

        var A3 = this.A3 = [8, 11];
        var B3 = this.B3 = [12, 11];
        var C3 = this.C3 = [6, 15];
        var D3 = this.D3 = [14, 15];

        var A4 = this.A4 = [25, 11];
        var B4 = this.B4 = [29, 11];
        var C4 = this.C4 = [24, 15];
        var D4 = this.D4 = [28, 15];

        this.totalLen = B[0] - A[0] + D[0] - C[0]
        this.drawABCD.prototype = this; //draw继承Draw方法
        this.p = new this.drawABCD(true); //创建实例p
        this.cObj.clearRect(0, 0, width, height); //清空画布
        this.drawBg.prototype = this; //draw继承Draw方法
        this.bg = new this.drawBg();
        this.bgObj.clearRect(0, 0, width, height); //清空画布
        this.obj.addEventListener('touchstart', function (event) {
            // Draw.p.drawABCD(30)
            if (event.targetTouches && event.targetTouches.length >= 1) {
                var touch = event.targetTouches[0];
                // console.log(Draw.p.A)
                touchJudge([touch.pageX, touch.pageY], 'start');
                // console.log('X:'+ touch.pageX + 'px')
                // console.log('Y:'+ touch.pageY + 'px')
            }
        }, false)
        this.obj.addEventListener('touchmove', function (event) {
            if (event.targetTouches && event.targetTouches.length >= 1) {
                var touch = event.targetTouches[0];
                touchJudge([touch.pageX, touch.pageY], 'move');
            }
        }, false)
        this.obj.addEventListener('touchend', function (event) {
            if (event.changedTouches && event.changedTouches.length >= 1) {
                var touch = event.changedTouches[0];
                touchJudge([touch.pageX, touch.pageY], 'end');
            }
        }, false)

        this.obj.addEventListener('mousedown', function (event) {
            if (event.targetTouches && event.targetTouches.length >= 1) {
            } else {
                touchJudge([event.clientX, event.clientY], 'start');
                // console.log([event.clientX, event.clientY])
            }
        }, false)
        this.obj.addEventListener('mousemove', function (event) {
            if (event.targetTouches && event.targetTouches.length >= 1) {
            } else {
                touchJudge([event.clientX, event.clientY], 'move');
                // console.log([event.clientX,event.clientY])
            }
        }, false)
        this.obj.addEventListener('mouseup', function (event) {
            touchJudge([event.clientX, event.clientY], 'end');
        }, false)

    },
    //... 
    drawABCD: function (notshow) { //绘图
        if(notshow){
            return;
        }
        this.cObj.clearRect(0, 0, width, height); //清空画布
        // console.log(this.x)
        var sumX = Math.floor(width / e);
        var sumY = Math.floor(height / e);

        var A = this.A;
        var B = this.B;
        var C = this.C;
        var D = this.D;

        var A2 = this.A2;
        var B2 = this.B2;
        var C2 = this.C2;
        var D2 = this.D2;

        var A3 = this.A3;
        var B3 = this.B3;
        var C3 = this.C3;
        var D3 = this.D3;

        var A4 = this.A4;
        var B4 = this.B4;
        var C4 = this.C4;
        var D4 = this.D4;

        var x = parseFloat((this.x / e).toFixed(0));
        var y = parseFloat((this.y / e).toFixed(0));
        if (this.isDrow === 'A') {
            A = [this.A[0] + x, this.A[1]];
            if (B[0] - A[0] < 0) {
                A[0] = B[0];
            }
            if (hfx - A[0] < 1) {
                A[0] = hfx - 1
            }
            if (A[0] < sideL) {
                A[0] = sideL
            }
        } else if (this.isDrow === 'B') {
            B = [this.B[0] + x, this.B[1]];
            if (B[0] - A[0] < 0) {
                B[0] = A[0];
            }
            if (hfx - B[0] < 1) {
                B[0] = hfx - 1
            }
        } else if (this.isDrow === 'C') {
            C = [this.C[0] + x, this.C[1]];
            if (D[0] - C[0] < 0) {
                C[0] = D[0];
            }
            if (C[0] < sideL) {
                C[0] = sideL;
            }
        } else if (this.isDrow === 'D') {
            D = [this.D[0] + x, this.D[1]];
            if (D[0] - C[0] < 0) {
                D[0] = C[0];
            }
            if (hfx - D[0] < 1) {
                D[0] = hfx - 1
            }
        }
        //3
        if (this.isDrow === 'A3') {
            A3 = [this.A3[0] + x, this.A3[1]];
            if (B3[0] - A3[0] < 0) {
                A3[0] = B3[0];
            }
            if (hfx - A3[0] < 1) {
                A3[0] = hfx - 1
            }
            if (A3[0] < sideL) {
                A3[0] = sideL
            }
        } else if (this.isDrow === 'B3') {
            B3 = [this.B3[0] + x, this.B3[1]];
            if (B3[0] - A3[0] < 0) {
                B3[0] = A3[0];
            }
            if (hfx - B3[0] < 1) {
                B3[0] = hfx - 1
            }
        } else if (this.isDrow === 'C3') {
            C3 = [this.C3[0] + x, this.C3[1]];
            if (D3[0] - C3[0] < 0) {
                C3[0] = D3[0];
            }
            if (C3[0] < sideL) {
                C3[0] = sideL;
            }
        } else if (this.isDrow === 'D3') {
            D3 = [this.D3[0] + x, this.D3[1]];
            if (D3[0] - C3[0] < 0) {
                D3[0] = C3[0];
            }
            if (hfx - D3[0] < 1) {
                D3[0] = hfx - 1
            }
        }
        //2
        if (this.isDrow === 'A2') {
            A2 = [this.A2[0] + x, this.A2[1]];
            if (B2[0] - A2[0] < 0) {
                A2[0] = B2[0];
            }
            if (A2[0] < hfx + 1) {
                A2[0] = hfx + 1
            }
        } else if (this.isDrow === 'B2') {
            B2 = [this.B2[0] + x, this.B2[1]];
            if (B2[0] - A2[0] < 0) {
                B2[0] = A2[0];
            }
            if (B2[0] > sideR) {
                B2[0] = sideR
            }
        } else if (this.isDrow === 'C2') {
            C2 = [this.C2[0] + x, this.C2[1]];
            if (D2[0] - C2[0] < 0) {
                C2[0] = D2[0];
            }
            if (C2[0] < hfx + 1) {
                C2[0] = hfx + 1;
            }
        } else if (this.isDrow === 'D2') {
            D2 = [this.D2[0] + x, this.D2[1]];
            if (D2[0] - C2[0] < 0) {
                D2[0] = C2[0];
            }
            if (D2[0] > sideR) {
                D2[0] = sideR
            }
        }
        //2
        if (this.isDrow === 'A4') {
            A4 = [this.A4[0] + x, this.A4[1]];
            if (B4[0] - A4[0] < 0) {
                A4[0] = B4[0];
            }
            if (A4[0] < hfx + 1) {
                A4[0] = hfx + 1
            }
        } else if (this.isDrow === 'B4') {
            B4 = [this.B4[0] + x, this.B4[1]];
            if (B4[0] - A4[0] < 0) {
                B4[0] = A4[0];
            }
            if (B4[0] > sideR) {
                B4[0] = sideR
            }
        } else if (this.isDrow === 'C4') {
            C4 = [this.C4[0] + x, this.C4[1]];
            if (D4[0] - C4[0] < 0) {
                C4[0] = D4[0];
            }
            if (C4[0] < hfx + 1) {
                C4[0] = hfx + 1;
            }
        } else if (this.isDrow === 'D4') {
            D4 = [this.D4[0] + x, this.D4[1]];
            if (D4[0] - C4[0] < 0) {
                D4[0] = C4[0];
            }
            if (D4[0] > sideR) {
                D4[0] = sideR
            }
        }

        //中分线
        this.cObj.beginPath();
        this.cObj.strokeStyle = 'rgba(81, 189, 47, 0.6)';
        this.cObj.lineWidth = 4;
        this.cObj.moveTo(hfx * e + el, 0);
        this.cObj.lineTo(hfx * e + el, height);
        this.cObj.stroke();
        //平行线
        this.cObj.beginPath();
        this.cObj.strokeStyle = 'rgba(81, 189, 47, 0.6)';
        this.cObj.lineWidth = 4;
        this.cObj.moveTo(e * 2, A[1] * e + el);
        this.cObj.lineTo(width - e * 2, A[1] * e + el);
        this.cObj.moveTo(e * 2, C[1] * e + el);
        this.cObj.lineTo(width - e * 2, C[1] * e + el);
        this.cObj.stroke();
        //平行线2
        this.cObj.beginPath();
        this.cObj.strokeStyle = 'rgba(81, 189, 47, 0.6)';
        this.cObj.lineWidth = 4;
        this.cObj.moveTo(e * 2, A3[1] * e + el);
        this.cObj.lineTo(width - e * 2, A3[1] * e + el);
        this.cObj.moveTo(e * 2, C3[1] * e + el);
        this.cObj.lineTo(width - e * 2, C3[1] * e + el);
        this.cObj.stroke();

        // 梯形
        ladderShaped(this.cObj, A, B, C, D);
        // 梯形2
        ladderShaped(this.cObj, A2, B2, C2, D2,null,'rgba(255, 0, 0, 0.6)');
        // 梯形3
        ladderShaped(this.cObj, A3, B3, C3, D3,null,'rgba(15, 103, 3, 0.6)');
        // 梯形4
        ladderShaped(this.cObj, A4, B4, C4, D4,null,'rgba(216, 0, 245, 0.6)');

        //各点 文字
        fonts(this.cObj, 'A', A, -e, -e * .5);
        fonts(this.cObj, 'C', C, -e, e * .5);
        fonts(this.cObj, 'D', D, e * .5, e * .5);
        fonts(this.cObj, 'B', B, e * .5, -e * .5);
        //各点 文字2
        fonts(this.cObj, 'A', A2, -e, -e * .5);
        fonts(this.cObj, 'C', C2, -e, e * .5);
        fonts(this.cObj, 'D', D2, e * .5, e * .5);
        fonts(this.cObj, 'B', B2, e * .5, -e * .5);
        //各点 文字3
        fonts(this.cObj, 'A', A3, -e, -e * .5);
        fonts(this.cObj, 'C', C3, -e, e * .5);
        fonts(this.cObj, 'D', D3, e * .5, e * .5);
        fonts(this.cObj, 'B', B3, e * .5, -e * .5);
        //各点 文字4
        fonts(this.cObj, 'A', A4, -e, -e * .5);
        fonts(this.cObj, 'C', C4, -e, e * .5);
        fonts(this.cObj, 'D', D4, e * .5, e * .5);
        fonts(this.cObj, 'B', B4, e * .5, -e * .5);


        //长度计算 文字
        fonts2(this.cObj, 'AB = ' + parseFloat((B[0] - A[0]).toFixed(0)) + ' cm', [A[0], A[1] - 1.3]);
        fonts2(this.cObj, 'CD = ' + parseFloat((D[0] - C[0]).toFixed(0)) + ' cm', [C[0], C[1] + 1.3]);
        //长度计算 文字2
        fonts2(this.cObj, 'AB = ' + parseFloat((B2[0] - A2[0]).toFixed(0)) + ' cm', [A2[0], A2[1] - 1.3]);
        fonts2(this.cObj, 'CD = ' + parseFloat((D2[0] - C2[0]).toFixed(0)) + ' cm', [C2[0], C2[1] + 1.3]);
        //长度计算 文字3
        fonts2(this.cObj, 'AB = ' + parseFloat((B3[0] - A3[0]).toFixed(0)) + ' cm', [A3[0], A3[1] - 1.3]);
        fonts2(this.cObj, 'CD = ' + parseFloat((D3[0] - C3[0]).toFixed(0)) + ' cm', [C3[0], C3[1] + 1.3]);
        //长度计算 文字4
        fonts2(this.cObj, 'AB = ' + parseFloat((B4[0] - A4[0]).toFixed(0)) + ' cm', [A4[0], A4[1] - 1.3]);
        fonts2(this.cObj, 'CD = ' + parseFloat((D4[0] - C4[0]).toFixed(0)) + ' cm', [C4[0], C4[1] + 1.3]);

        fonts2(this.cObj, '单位 1 cm', [0, .5]);
        fonts2(this.cObj,titleText,[10, .5],25)
        //可移动点
        allowMovePoint(this.cObj, A, -e + el, -e * .5);
        allowMovePoint(this.cObj, B, e - el, -e * .5);
        allowMovePoint(this.cObj, C, -e + el, e * .5);
        allowMovePoint(this.cObj, D, e - el, e * .5);
        //可移动点2
        allowMovePoint(this.cObj, A2, -e + el, -e * .5);
        allowMovePoint(this.cObj, B2, e - el, -e * .5);
        allowMovePoint(this.cObj, C2, -e + el, e * .5);
        allowMovePoint(this.cObj, D2, e - el, e * .5);
        //可移动点3
        allowMovePoint(this.cObj, A3, -e + el, -e * .5);
        allowMovePoint(this.cObj, B3, e - el, -e * .5);
        allowMovePoint(this.cObj, C3, -e + el, e * .5);
        allowMovePoint(this.cObj, D3, e - el, e * .5);
        //可移动点4
        allowMovePoint(this.cObj, A4, -e + el, -e * .5);
        allowMovePoint(this.cObj, B4, e - el, -e * .5);
        allowMovePoint(this.cObj, C4, -e + el, e * .5);
        allowMovePoint(this.cObj, D4, e - el, e * .5);

    },
    drawBg: function () { //绘背景
        bgPic.src = './img/bg_hxq.png';
        this.bgObj.clearRect(0, 0, width, width); //清空画布
        var bgLineColor = 'rgba(241, 90, 74, 1)';//颜色
        var spaceWidth = 6;

        this.bgObj.beginPath();
        this.bgObj.globalAlpha = .4;
        this.bgObj.drawImage(bgPic, 0, 0, width, height)
        this.bgObj.stroke();
        this.bgObj.save();

        this.bgObj.beginPath();
        this.bgObj.strokeStyle = bgLineColor;
        this.bgObj.lineWidth = 2;
        var isOralDash = true;
        if (this.bgObj.setLineDash) {
            this.bgObj.setLineDash([spaceWidth]);
        } else if (this.bgObj.webkitLineDash) {
            this.bgObj.webkitLineDash([spaceWidth]);
        } else if (this.bgObj.mozDash) {
            this.bgObj.mozDash([spaceWidth]);
        } else {
            isOralDash = false;
        }
        var sumX = Math.floor(width / e);
        var sumY = Math.floor(height / e);
        for (var i = 0; i < sumY; i++) {//画横线
            if (isOralDash) {
                this.bgObj.moveTo(0, e * i + el);
                this.bgObj.lineTo(width - el, e * i + el);
            } else {
                drawDashLine(this.bgObj, 0, e * i + el, width - el, e * i + el, spaceWidth);
            }
        }
        for (var i = 0; i < sumX; i++) {//画竖线
            if (isOralDash) {
                this.bgObj.moveTo(e * i + el, 0);
                this.bgObj.lineTo(e * i + el, height - el);
            } else {
                drawDashLine(this.bgObj, e * i + el, 0, e * i + el, height - el, spaceWidth);
            }
        }
        this.bgObj.stroke();
    }
}
function ladderShaped(ctx, A, B, C, D, color, bgColor) {
    ctx.beginPath();
    ctx.strokeStyle = color || '#0078b4';
    ctx.lineWidth = 4;

    ctx.moveTo(A[0] * e + el, A[1] * e + el);

    ctx.lineTo(C[0] * e + el, C[1] * e + el);

    ctx.lineTo(D[0] * e + el, D[1] * e + el);

    ctx.lineTo(B[0] * e + el, B[1] * e + el);

    ctx.lineTo(A[0] * e + el, A[1] * e + el);

    ctx.lineTo(C[0] * e + el, C[1] * e + el);
    ctx.fillStyle = bgColor || 'rgba(0, 120, 180, 0.6)';
    ctx.fill();
    ctx.stroke();
}
function point(ctx, P) {
    ctx.beginPath();
    ctx.strokeStyle = 'rgba(187, 114, 36, 1)';
    ctx.lineWidth = 1;
    ctx.arc(P[0] * e + el, P[1] * e + el, 2, 0, 2 * Math.PI);
    ctx.fillStyle = 'rgba(187, 114, 36, 1)';
    ctx.fill();
    ctx.stroke();
}
function allowMovePoint(ctx, P, x, y) {
    point(ctx, P);
    x = x || 0;
    y = y || 0;
    ctx.beginPath();
    ctx.strokeStyle = 'rgba(187, 114, 36, 0.15)';
    ctx.lineWidth = 1;
    ctx.arc(P[0] * e + el + x, P[1] * e + el + y, touchR, 0, 2 * Math.PI);
    ctx.fillStyle = 'rgba(187, 114, 36, 0.15)';
    ctx.fill();
    ctx.stroke();
}

function fonts(ctx, text, point, x, y, size) {
    ctx.beginPath();
    x = x || 0;
    y = y || 0;
    size = size || 40;
    //设置字体样式
    ctx.font = 'bold ' + size + "px Courier New ";
    //设置字体填充颜色
    ctx.fillStyle = "#555";
    ctx.fillText(text, point[0] * e + el + x, point[1] * e + el + el + y);
    ctx.stroke();
}

function fonts2(ctx, text, point, size) {
    ctx.beginPath();
    size = size || 30;
    ctx.font = 'bold ' + size + "px Courier New";
    ctx.fillStyle = "#666";
    ctx.fillText(text, point[0] * e + el, point[1] * e + el + el);
    ctx.stroke();
}
function initJudgePoint(p, p0) {
    return [p[0] * e + el * 1.5 + p0[0], p[1] * e + el * 1.5 + p0[1]];
}
function tocuStart(touch, DrawA, DrawB, DrawC, DrawD, arr) {
    var A = initJudgePoint(DrawA, a);
    var B = initJudgePoint(DrawB, b);
    var C = initJudgePoint(DrawC, c);
    var D = initJudgePoint(DrawD, d);
    if (Math.abs(A[0] - touch[0]) <= touchR && Math.abs(A[1] - touch[1]) <= touchR) {
        Draw.p.isDrow = arr[0];
    } else if (Math.abs(B[0] - touch[0]) <= touchR && Math.abs(B[1] - touch[1]) <= touchR) {
        Draw.p.isDrow = arr[1];
    } else if (Math.abs(C[0] - touch[0]) <= touchR && Math.abs(C[1] - touch[1]) <= touchR) {
        Draw.p.isDrow = arr[2];
    } else if (Math.abs(D[0] - touch[0]) <= touchR && Math.abs(D[1] - touch[1]) <= touchR) {
        Draw.p.isDrow = arr[3];
    }
}
//判断触屏事件和点的距离，
function touchJudge(touch, type) {
    if (type == 'start') {
        tocuStart(touch, Draw.p.A, Draw.p.B, Draw.p.C, Draw.p.D, ['A', 'B', 'C', 'D']);
        tocuStart(touch, Draw.p.A2, Draw.p.B2, Draw.p.C2, Draw.p.D2, ['A2', 'B2', 'C2', 'D2']);
        tocuStart(touch, Draw.p.A3, Draw.p.B3, Draw.p.C3, Draw.p.D3, ['A3', 'B3', 'C3', 'D3']);
        tocuStart(touch, Draw.p.A4, Draw.p.B4, Draw.p.C4, Draw.p.D4, ['A4', 'B4', 'C4', 'D4']);
        Draw.p.start = touch
    } else if (Draw.p.isDrow && type == 'move') {
        var x = parseFloat((touch[0] - Draw.p.start[0]).toFixed(0));
        var y = parseFloat((touch[1] - Draw.p.start[1]).toFixed(0));
        if (Draw.p.isDrow === 'A') {
            Draw.p.x = x; //x移动偏移量
        } else if (Draw.p.isDrow === 'B') {
            Draw.p.x = x; //x移动偏移量
        } else if (Draw.p.isDrow === 'C') {
            Draw.p.x = x; //x移动偏移量
        } else if (Draw.p.isDrow === 'D') {
            Draw.p.x = x; //x移动偏移量
        } else {
            Draw.p.x = x; //x移动偏移量
        }
    } else if (Draw.p.isDrow) {
        var x = parseFloat((Draw.p.x / e).toFixed(0));
        var y = parseFloat((Draw.p.y / e).toFixed(0));
        // 结束时更新到最新状态
        endMove(1, Draw.p.A, Draw.p.B, Draw.p.C, Draw.p.D, ['A', 'B', 'C', 'D']);
        endMove(1, Draw.p.A3, Draw.p.B3, Draw.p.C3, Draw.p.D3, ['A3', 'B3', 'C3', 'D3']);
        endMove(2, Draw.p.A2, Draw.p.B2, Draw.p.C2, Draw.p.D2, ['A2', 'B2', 'C2', 'D2']);
        endMove(2, Draw.p.A4, Draw.p.B4, Draw.p.C4, Draw.p.D4, ['A4', 'B4', 'C4', 'D4']);

        Draw.p.x = 0 //滑块坐标偏移恢复
        Draw.p.y = 0 //滑块坐标偏移恢复
        Draw.p.isDrow = false;
    } else {
        Draw.p.isDrow = false;
    }
}
function endMove(type, DrawA, DrawB, DrawC, DrawD, arr) {
    var x = parseFloat((Draw.p.x / e).toFixed(0));
    var y = parseFloat((Draw.p.y / e).toFixed(0));
    // 结束时更新到最新状态
    var A = DrawA;
    var C = DrawC;
    var B = DrawB;
    var D = DrawD;
    if (type == 1) {
        if (Draw.p.isDrow === arr[0]) {
            A[0] = DrawA[0] + x;
            if (B[0] < A[0]) {
                A[0] = B[0]
            }
            if (hfx - A[0] < 1) {
                A[0] = hfx - 1
            }
            if (A[0] < sideL) {
                A[0] = sideL
            }
            DrawA = A;
        } else if (Draw.p.isDrow === arr[1]) {
            B[0] = DrawB[0] + x;
            if (B[0] < A[0]) {
                B[0] = A[0]
            }
            if (hfx - B[0] < 1) {
                B[0] = hfx - 1
            }
            DrawB = B;
        } else if (Draw.p.isDrow === arr[2]) {
            C[0] = DrawC[0] + x;
            if (D[0] - C[0] < 0) {
                C[0] = D[0];
            }
            if (C[0] < sideL) {
                C[0] = sideL;
            }
            DrawC = C;
        } else if (Draw.p.isDrow === arr[3]) {
            D[0] = DrawD[0] + x;
            if (D[0] - C[0] < 0) {
                D[0] = C[0];
            }
            if (hfx - D[0] < 1) {
                D[0] = hfx - 1
            }
            DrawD = D;
        }
    } else {
        if (Draw.p.isDrow === arr[0]) {
            A[0] = DrawA[0] + x;
            if (B[0] - A[0] < 0) {
                A[0] = B[0];
            }
            if (A[0] < hfx + 1) {
                A[0] = hfx + 1
            }
            DrawA = A;
        } else if (Draw.p.isDrow === arr[1]) {
            B[0] = DrawB[0] + x;
            if (B[0] - A[0] < 0) {
                B[0] = A[0];
            }
            if (B[0] > sideR) {
                B[0] = sideR
            }
            DrawB = B;
        } else if (Draw.p.isDrow === arr[2]) {
            C[0] = DrawC[0] + x;
            if (D[0] - C[0] < 0) {
                C[0] = D[0];
            }
            if (C[0] < hfx + 1) {
                C[0] = hfx + 1;
            }
            DrawC = C;
        } else if (Draw.p.isDrow === arr[3]) {
            D[0] = DrawD[0] + x;
            if (D[0] - C[0] < 0) {
                D[0] = C[0];
            }
            if (D[0] > sideR) {
                D[0] = sideR
            }
            DrawD = D;
        }
    }
}
Draw.init();
document.body.onload = game;
function game() {
    lastTime = Date.now();
    deltaTime = 0;
    gameloop();
}
//主循环
function gameloop() {
    window.requestAnimFrame(gameloop);//setInterval,setTimeout，frame per second
    var now = Date.now();
    //两帧之间的时间间隔；
    deltaTime = now - lastTime;
    if (deltaTime > 40) deltaTime = 40;
    lastTime = now;
    //清屏
    Draw.cObj.clearRect(0, 0, width, height); //清空画布
    Draw.p.drawABCD();
    Draw.bgObj.clearRect(0, 0, width, height); //清空背景画布
    Draw.p.drawBg();
}

function getBeveling(x, y) {
    return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
}
function drawDashLine(context, x1, y1, x2, y2, dashLen) {
    dashLen = dashLen === undefined ? 5 : dashLen;
    //得到斜边的总长度  
    var beveling = getBeveling(x2 - x1, y2 - y1);
    //计算有多少个线段  
    var num = Math.floor(beveling / dashLen);

    for (var i = 0; i < num; i++) {
        context[i % 2 == 0 ? 'moveTo' : 'lineTo'](x1 + (x2 - x1) / num * i, y1 + (y2 - y1) / num * i);
    }
    // context.stroke(); 
}
window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function ( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
            return window.setTimeout(callback, 1000 / 1);
        };
})();
//禁用html缩放
var scrollFunc = function (e) {
    e = e || window.event;
    if (e.wheelDelta && event.ctrlKey) {//IE/Opera/Chrome
        event.returnValue = false;
    } else if (e.detail) {//Firefox
        event.returnValue = false;
    }
}
/*注册事件*/
if (document.addEventListener) {
    document.addEventListener('DOMMouseScroll', scrollFunc, false);
}//W3C0
window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome/Safari